import PropTypes from "prop-types"
import { BrowserWrapper } from "./style"
import { CSSTransition, SwitchTransition } from "react-transition-group"
import React, { memo, useEffect, useState } from "react"
import { CloseOutlined } from "@ant-design/icons"
import { Space } from "antd"
import IconArrowLeft from "@/assets/svg/icon-arrow-left"
import IconArrowRight from "@/assets/svg/icon-arrow-right"
import Indicator from "../indicator"
import classNames from "classnames"

import IconTriangleTop from "@/assets/svg/Icon-triangle-top"
import IconTriangleBottom from "@/assets/svg/Icon-triangle-bottom"
const PictureBrowser = memo((props) => {
    const { pictureUrls, closeClick } = props
    const [currentIndex, setCurrentIndex] = useState(0)
    const [isNext, setIsNext] = useState(true)
    const [showList, setShowList] = useState(true)
    // 图片浏览器出现后，隐藏滚动条
    useEffect(() => {
        document.body.style.overflow = "hidden"
        return () => {
            document.body.style.overflow = "auto"
        }
    }, [])
    /**
     * 事件处理逻辑
     */
    // 点击关闭按钮
    function closeBtnClickHandle() {
        if (closeClick) closeClick()
    }
    //上下切换
    function controlBtnHandle(isNext = true) {
        let newIndex = isNext ? currentIndex + 1 : currentIndex - 1
        if (newIndex < 0) newIndex = pictureUrls.lenght - 1
        if (newIndex > pictureUrls.lenght - 1) newIndex = 0
        setCurrentIndex(newIndex)
        setIsNext(isNext)
    }
    // 点击底部图片
    function handleBottomItemClick(index) {
        setIsNext(index > currentIndex)
        setCurrentIndex(index)
    }
    return (
        <BrowserWrapper isNext={isNext} showList={showList}>
            <div className="top">
                <div className="close-btn" onClick={closeBtnClickHandle}>
                    <Space>
                        <CloseOutlined
                            style={{
                                fontSize: "38px",
                                color: "#fff",
                                cursor: "pointer",
                            }}
                        />
                    </Space>
                </div>
            </div>
            <div className="slide">
                <div className="control">
                    <div
                        className="btn left"
                        onClick={(e) => controlBtnHandle(false)}
                    >
                        <IconArrowLeft width="77" height="77" />
                    </div>
                    <div
                        className="btn right"
                        onClick={(e) => controlBtnHandle(true)}
                    >
                        <IconArrowRight width="77" height="77" />
                    </div>
                </div>
                <div className="container">
                    <SwitchTransition mode="in-out">
                        <CSSTransition
                            key={pictureUrls[currentIndex]}
                            classNames="pic"
                            timeout={150}
                        >
                            <img src={pictureUrls[currentIndex]} alt="" />
                        </CSSTransition>
                    </SwitchTransition>
                </div>
            </div>
            <div className="preview">
                <div className="info">
                    <div className="desc">
                        <div className="count">
                            <span>
                                {currentIndex + 1}/{pictureUrls.length}
                            </span>
                        </div>
                        <div
                            className="toggle"
                            onClick={(e) => setShowList(!showList)}
                        >
                            <span>{showList ? "隐藏" : "显示"}照片列表</span>
                            {showList ? (
                                <IconTriangleBottom />
                            ) : (
                                <IconTriangleTop />
                            )}
                        </div>
                    </div>
                    <div className="list">
                        <Indicator selectIndex={currentIndex}>
                            {pictureUrls.map((item, index) => {
                                return (
                                    <div
                                        className={classNames("item", {
                                            active: currentIndex === index,
                                        })}
                                        key={item}
                                        onClick={(e) =>
                                            handleBottomItemClick(index)
                                        }
                                    >
                                        <img src={item} alt="" />
                                    </div>
                                )
                            })}
                        </Indicator>
                    </div>
                </div>
            </div>
        </BrowserWrapper>
    )
})

PictureBrowser.propTypes = {
    pictureUrls: PropTypes.array,
}

export default PictureBrowser
